<template>
  <el-dialog v-model="selfDialogVisible" :title="showType + editDialogFormConfig.name" width="30%" destroy-on-close>
    <search-form v-bind="editDialogFormConfig" v-model="formDate"></search-form>
    <slot></slot>
    <template #footer>
      <el-button @click="selfDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmDialogBtn">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, nextTick, ref, watch } from "vue"
import SearchForm from "@/base_ui/form"
import store from "@/store"
export default defineComponent({
  components: {
    SearchForm,
  },
  props: {
    editDialogFormConfig: {
      type: Object,
      required: true,
    },
    pageName: {
      type: String,
      required: true,
    },
    otherInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    // 编辑或新建
    const showType = ref("")

    const originDate: any = ref({})

    // 清空对话框的数据
    const clearDate = () => {
      Object.keys(formDate.value).forEach((key) => {
        formDate.value[key] = ""
      })
      // formDate.value['id'] = ""
    }
    // 获取某一条数据
    props.editDialogFormConfig.searchFormItems.forEach((item: any) => {
      originDate.value[item.field] = ""
    })
    const formDate = originDate

    const selfDialogVisible = ref(false)

    const confirmDialogBtn = () => {
      // id为空 就是新建请求
      if (!currentId.value) {
        // id 随机获取
        // formDate.value.id = Math.floor(Math.random()*100000)
        // 默认密码123456
        formDate.value.password = "123456"
        console.log("新增数据")
        store.dispatch("system/addPageDateAction", {
          pageName: props.pageName,
          addInfo: { ...formDate.value, ...props.otherInfo },
        })
      } else {
        // 修改请求
        console.log("修改数据")
        store.dispatch("system/editPageDateAction", {
          pageName: props.pageName,

          update: { ...formDate.value, ...props.otherInfo },
          id: currentId.value,
        })
      }
      console.log(formDate.value)
      selfDialogVisible.value = false
    }
    const currentId = ref()
    // 展示数据的回调
    const dialogShowRowDate = () => {
      showType.value = "编辑"
      return function (rowDate: any) {
        Object.keys(formDate.value).forEach((key) => {
          formDate.value[key] = rowDate[key]
        })
        nextTick(() => {
          selfDialogVisible.value = true
        })
        currentId.value = rowDate.id
      }
    }

    // 展示空的对话框
    const showEmptyDialog = () => {
      showType.value = "新建"
      currentId.value = ""

      console.log(formDate)
      clearDate()
      selfDialogVisible.value = true
    }

    return {
      formDate,
      confirmDialogBtn,
      selfDialogVisible,
      dialogShowRowDate,
      showEmptyDialog,
      showType,
      currentId,
    }
  },
})
</script>
<style lang="less" scoped>
.el-dialog {
  div {
    padding: 0;
  }
  .search {
    padding: 0;
  }
}
</style>
